<template>
	<view class="content">
		<u-navbar title="切换城市" :autoBack="true">
		</u-navbar>
		<!-- <u-navbar leftText="返回" placeholder></u-navbar> -->
		<view class="city_box">
			<view class="citylist">
				<view class="city_item" @click="select({id:'',name:'全部'})">全部</view>
			</view>
			<view class="citylist">
				<view v-for="v in getCityList" class="city_item" :key="v.id" @click="select(v)">{{v.name}}</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import {
		cityList
	} from '@/api/home/search.js'
	export default {
		data() {
			return {
				//getCityList: [{id:'410100',name:'郑州'}]
				getCityList: []
			}
		},
		methods: {
			...mapMutations(['INDEXHOSDATA']),
			async select(params) {
				this.$store.state.doc.IndexCityNav = params
				await this.INDEXHOSDATA()
				uni.switchTab({
					url: `/pages/index/index`
				});
			},
			async getCity() {
				let res = await cityList()
				this.getCityList = res.data
				//console.log(res);
			}
		},
		// onReady() {
		// 	wx.setNavigationBarTitle({
		// 		title: '切换城市'
		// 	})
		// },
		onLoad() {
			// my.setNavigationBar({
			// 	title: '切换城市',
			// })
			// uni.setNavigationBarTitle({
			// 	title: '切换城市'
			// });

			this.getCity()
		},
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #eee;
		height: 100vh;

		.city_box {
			padding-top: 100px;

			.citylist {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;

				.city_item {
					border-radius: 30rpx;
					background-color: #fff;
					border: 1px solid #fff;
					margin-bottom: 30rpx;
					flex: 0 0 23%;
					text-align: center;
					padding: 20rpx 0;
					margin-bottom: 50rpx;
				}

				.city_item:nth-child(3n+3) {
					margin-right: 50rpx;
				}

				.city_item:nth-child(3n+1) {
					margin-left: 50rpx;
				}
			}
		}

	}
</style>